<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动情景1：图片与文本环绕</title>
		<style>
			<style>
				
				p{
					border: 1px solid black;
					font-size: 16px;/*页面文字默认大小：16px*/
					line-height: 20px;/*浮动p块元素，内容行内元素*/
				    /*结论：文本无法浮动，特点：块包行*/
				}
				
				img{
					float:left;
					/*文字图片加间距*/
					margin: 30px;
					border: 10px solid red;
				}
			</style>
			
		</style>
	</head>
	<body>
		<h1>浮动情景1：图片与文本环绕</h1>
		<img src="img/img_2.png" alt="熏悟空" width="250px" height="250px"/>
	
		<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis quod iste aliquam officiis culpa et praesentium accusantium reprehenderit dolorum? Magnam facere quaerat hic error minus ab aliquam tenetur dolores atque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Laudantium architecto eaque velit deserunt necessitatibus ex voluptatibus accusantium, voluptas sed, voluptate aliquam. Architecto similique obcaecati expedita debitis quis? Aut, hic adipisci? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sint sit expedita illo suscipit velit deleniti magni cupiditate debitis repudiandae nam! A pariatur vero minima eveniet nulla dolorum dolores minus ratione? Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nemo ullam quidem, id, minus consectetur, rem nihil molestias quasi amet odio numquam praesentium molestiae expedita non quis vero iure. Voluptatibus, fugiat. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Earum impedit unde voluptatibus error molestias qui, consequatur sequi aliquam eius officiis voluptates mollitia illo architecto laborum quos nisi voluptate ipsa dicta. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Omnis, ad. Tempora non qui quidem voluptatem nam. Similique repudiandae eius voluptates, sed cumque excepturi dolor aperiam laboriosam eveniet molestiae iste saepe. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Architecto, voluptas facilis. Animi velit rem magni eius quam distinctio nulla, voluptates ex sequi, veniam asperiores consequatur eveniet non odit, doloremque corporis? Lorem ipsum dolor sit amet, consectetur adipisicing elit. A vitae in quia, voluptatum libero quibusdam sunt. Aspernatur autem, nobis architecto in ipsa natus aliquid nostrum expedita repellendus. Expedita, sed dolor.</p>
	</body>
</html>